const treeData = ref({
  name: 'My Tree',
  children: [
    { name: 'hello' },
    { name: 'world' },
    {
      name: 'child folder',
      children: [
        {
          name: 'child folder',
          children: [{ name: 'hello' }, { name: 'world' }]
        },
        { name: 'hello' },
        { name: 'world' },
        {
          name: 'child folder',
          children: [{ name: 'hello' }, { name: 'world' }]
        }
      ]
    }
  ]
})

export default () => {
  return (
    <details>
      <ItemRender list={treeData.value} />
    </details>
  )
}

const ItemRender = ({ list }) => {
  return (
    <>
      {list.children ? (
        <>
          <summary>{list.name}</summary>
          {list.children.map((item) => (
            <details>
              <ItemRender list={item} />
            </details>
          ))}
        </>
      ) : (
        <span>{list.name}</span>
      )}
    </>
  )
}
